<!DOCTYPE HTML>
<html lang="cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <%include("/common/header.html",{title:''}){}%>
  <title>告警统计</title>
  <style>

  </style>

</head>

<body>


<div class="x-nav" style="margin: 20px auto auto 15px;">
      <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
        <a href="javascript:">首页</a><span lay-separator="">/</span>
        <a href="javascript:">告警管理</a><span lay-separator="">/</span>
        <a><cite>告警统计</cite></a>
      </span>
  <a class="layui-btn layui-btn-primary layui-btn-small" style="margin: -5px 14px 0px 0px;float:right;"
     href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon layui-icon-refresh-3"></i>
  </a>
</div>
<!--
<div class="layui-fluid">
  <div class="layui-card">
    <table class="layui-table">

      <tr style="background-color: #70afc4;color: white">
        <td colspan="2">
        </td>
      </tr>
      <tr>

        <td>
          <div id="container" style="height: 400px;width: 100%"></div>
        </td>
      </tr>
      <tr>
        <td valign="top" style="height: 100%;width: 98%;">

          <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>

        </td>
      </tr>

    </table>
  </div>
</div>-->
<div style="padding: 20px">
<div class="layui-row layui-col-space15">


    <div class="layui-col-sm12">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12">
                <span style="font-size: 18px">告警统计 </span>
                <div id="container" style="height: 400px;width: 100%;"></div>

                <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
            </div>
        </div>
    </div>


</div>
</div>
<script type="text/html" id="level">
    {{#  if(d.level === '高级告警'||d.level==='中级告警'){ }}
    <span style="color: #ffffff;">{{ d.level}}</span>
    {{#  } else { }}
    {{ d.level }}
    {{#  } }}
</script>
<script type="text/html" id="currentvalue">
    {{#  if(d.level === '高级告警'){ }}
    <span style="color: #ff0000;">{{ d.currentvalue}}</span>
    {{#  } else { }}
    {{ d.currentvalue }}
    {{#  } }}
</script>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  layui.use(['index', 'table', 'form', 'laydate', 'layedit', 'AjaxCommon', 'AliangLayui'], function () {
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var AjaxCommon = layui.AjaxCommon;
    var AliangLayui = layui.AliangLayui;
    var title = "告警列表";
    var findAll_url = 'alarmHistory/findAll.jhtml';

    var cols = [ //表头
      {field: 'level',   title: '级别', templet:'#level', style:'background-color: #ff0000;'},
      {field: 'alarmtime',   title: '发生时间',templet: "<div>{{layui.util.toDateString(d.alarmtime,'yyyy-MM-dd HH:mm:ss')}}</div>"},
      {field: 'typecode',  sort:'true' , title: '类别',},
      {templet: "<div>{{d.departProjectData.dataName}}</div>", sort: true,  title: '点位',},
      {field: 'currentvalue',  sort:'true' , title: '实际值',templet:'#currentvalue'},
      {field: 'setvalue',  sort:'true' , title: '设定值',},
      // {field: 'stitas',  sort:'true' , title: '状态', templet:'#state'},
      // {title: '操作', fixed: 'right', width: 215, toolbar: '#table-useradmin-webuser',}
    ];
    AliangLayui.createTable(
            "#LAY-user-manage",
            "listReload",
            "#toolbarDemo",
            title,
            findAll_url,
            true,
            [10, 15, 20, 25],
            ['filter', 'print', 'exports'],
            cols,
            null
    );
  })


  $(function () {
    search();
  });

  function search() {


// 本年逐月
    $.ajax({
      url: "alarmHistory/findDataFive.jhtml",
      type: "POST",
      data: {},
      dataType: "json",
      success: function (ret) {
          var dom = document.getElementById("container");
          var myChart = echarts.init(dom);
          var app = {};
          option = null;
          myChart.setOption(option = {

              tooltip: {
                  trigger: 'axis'
              },
              xAxis: {
                  data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
              },
              yAxis: {
                  splitLine: {
                      show: false
                  }
              },

              series:[
                  {
                      name: '实时温度',
                      type: 'line',
                      data: ret.data.wendu,

                  },
                  {
                      name: '实时湿度',
                      type: 'line',
                      data: ret.data.shidu,

                  },{
                      name: '氨气',
                      type: 'line',
                      data: ret.data.NH3,

                  },
                  {
                      name: '二氧化碳',
                      type: 'line',
                      data: ret.data.co2,

                  },
                  {
                      name: '光照强度',
                      type: 'line',
                      data: ret.data.gzqd,

                  }
              ]
          });
      if (option && typeof option === "object") {
          myChart.setOption(option, true);
      }

      },
      error: function (jqXHR, textStatus, errorThrown) {
      }
    });


  }


</script>


</body>

</html>
